import { FC, useState } from 'react';
// import Sform from './src/form';
import { Button, message, Table, Image } from 'antd';
import { ColumnsType } from 'antd/es/table';
import TableAction, {
  MenuItem,
} from '@/components/commonComponent/tableAction/tableAction';
import useRequest from '@ahooksjs/use-request';
import { getDatasetPicture } from '@/api/sr-stms';
import { splitSearchParams } from '@/utils/common';
import { delete_dataset_picture_api, downladDataset } from '@/api/sr-stms';
import { ProjectItem } from '.';
import moment from 'moment';
import { useAPDrawer } from '@/hooks/baseHook';
import APDrawer from './src/drawer';
// import Edit from './src/editPlanarGraph'

interface Iprops {
  selectedProject: ProjectItem | null;
}

const Content: FC<Iprops> = (props) => {
  const { selectedProject } = props;
  const { handleAddClick, handleClose, handleEditClick, record, visible } =
    useAPDrawer<any>();
  const [searchParams, setSearchParams] = useState<SearchParam[]>([]);
  const { tableProps, refresh } = useRequest(
    ({ current, pageSize }) =>
      getDatasetPicture({
        page: current,
        size: pageSize,
        search_params: [
          ...searchParams,
          {
            field_name: 'dataset_name',
            operator: 'eq',
            value: selectedProject?.name,
          },
        ],
      }),
    {
      ready: !!selectedProject,
      paginated: true,
      refreshDeps: [searchParams, selectedProject],
      formatResult: (res) => ({
        list: res.data.list,
        total: res.data.total_elements,
      }),
    },
  );

  const columns: ColumnsType<any> = [
    // { title: '编码', dataIndex: 'id' },
    // { title: '数据集名称', dataIndex: 'dataset_name' },
    { title: '图片名称', dataIndex: 'file_name' },
    {
      title: '图片',
      dataIndex: 'id',
      render: (id) => (
        <Image
          width={200}
          src={window.config.SERVER_HOST + `/file/download/${id}`}
        ></Image>
      ),
    },
    {
      title: '操作',
      // render: (text, record) => {
      //   return (
      //     <TableAction
      //       // editText="下载数据集"
      //       record={record}
      //       menuList={menuList}
      //       // onEditClick={handleEditClick}
      //       showEdit={false}
      //     ></TableAction>
      //   );
      // },
      render: (text, record) => (
        <span onClick={() => handleDelClick(record.dataset_id, record.id)}>
          删除
        </span>
      ),
    },
  ];

  const menuList: MenuItem<any>[] = [
    {
      name: '删除',
      fn: (record) => handleDelClick(record.dataset_id, record.id),
    },
    // { name: '下载数据集', fn: (record) => handleDownload(record.dataset_name) },
  ];

  // const handleDownload = (dataset_name: string) => {
  //   downladDataset(dataset_name, {
  //     dataset_name,
  //   });
  // };

  const handleDelClick = async (dataset_id: string, id: string) => {
    //调用删除接口
    await delete_dataset_picture_api(dataset_id, id)();
    message.success('删除成功！');
    refresh();
  };

  /** 表单查询回调 */
  const formSearch = (vals: any) => {
    setSearchParams(splitSearchParams(vals));
  };

  /** 新增、编辑成功回调 */
  const drawerCallback = () => {
    refresh();
  };

  return (
    <div style={{ padding: 20, background: '#fff' }}>
      <APDrawer
        visible={visible}
        record={record}
        onClose={handleClose}
        callback={drawerCallback}
      ></APDrawer>
      {/* <Sform formSearch={formSearch}></Sform> */}
      {/* <div style={{ marginBottom: 15 }}> */}
      {/* <Button type="primary" onClick={handleAddClick}>
          新增
        </Button> */}
      {/* <Image src={window.config.SERVER_HOST + `/file/download?file_id=1456154904027602944`}></Image> */}
      {/* </div> */}
      <Table
        {...tableProps}
        pagination={{
          ...tableProps.pagination,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total) => `总共 ${total} 条`,
        }}
        columns={columns}
        rowKey={(record) => record.id}
        bordered
      ></Table>
      {/* <Edit visible={false} /> */}
    </div>
  );
};

export default Content;
